<!-- <!DOCTYPE html> -->
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>AI聊天</title>
    <!-- 引入代码高亮库 -->
    
    <link rel="stylesheet" href="default.min.css">
    <link rel="stylesheet" href="colors.css">
    <script src="highlight.min.js"></script>
    <script src="vue.js"></script>
    <script src="underscore.js"></script>

    <style>
        /* 基础样式 */
        h1,h2,h3,h4,h5,h6,h7,h8,ul,ol {
            margin: 8px 0
        }
        body {
            width: 100vw;
            height: 100vh;
            margin: 0;
            padding: 20px;
            /* color: #2f2f2f;
            background-color: #e4e4e4; */
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            
        }

        .divider::before {
            content: "";
            display: block;
            width: 80%;
            margin: 16px 0;
            border-bottom: 0.5px solid var(--c-font)
        }

        .markup {
            white-space: normal;
        }

        div.temp {
            opacity: 0.7;
            font-style: italic;
            font-size: 11px;
            white-space: pre-wrap;
            margin-bottom: 12px;
        }

        think, div.thinking {
            opacity: 0.7;
            font-style: italic;
            font-size: 12px;
            white-space: pre-wrap;
        }

        /* 聊天容器 */
        .chat-container {
            width: 100vw;
            margin: 0 auto;
            /* border-radius: 12px; */
            box-shadow: 0 2px 12px rgba(0,0,0,0.1);
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        /* 消息展示区域 */
        .chat-messages {
            flex: 1;
            padding: 20px;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .message-hidden {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            text-overflow: ellipsis;
            -webkit-line-clamp: 6;
        }

        /* 消息气泡 */
        .message {
            max-width: 85%;
            padding: 12px 16px;
            border-radius: 8px;
            animation: fadeIn 0.3s ease-in; 
            font-size: small;
            box-shadow: 0 2px 12px rgba(0,0,0,0.5);
            position: relative;
        }

        .message-btn {
            position: absolute;
            bottom: 0;
            right: 0;
            padding: 4px;
            border-bottom-right-radius: 8px;
            border-top-left-radius: 8px;
            font-size: small;
        }

        .message-raw-btn {
            position: absolute;
            top: 0;
            right: 0;
            padding: 4px;
            color: var(--c-primary_font);
            background: var(--c-primary);
            border-top-right-radius: 8px;
            
            border-bottom-left-radius: 8px;
            font-size: small;
        }

        .user-message {
            align-self: flex-end;
            white-space: pre-wrap;
        }

        /* .user-message {
            position: sticky;
            top: 0px;
            z-index: 999;
            width: 50vw;
        } */
        .user-message:nth-last-of-type(2) {
            position: sticky;
            top: 0px;
            z-index: 999;
            /* width: 50vw; */
        }

        .bot-message {
            align-self: flex-start;
            padding-bottom: 24px;
        }

        span.quote {
            color: var(--c-red);
            background-color: var(--c-background);
            font-style: italic;
            padding: 0 4px;
            border-radius: 4px;
            /* border: solid 1px; */
            margin: 1.2px;
        }

        /* 输入区域 */
        .input-container {
            padding: 8px;
            border-top: 0.1px solid var(--c-primary);
            display: flex;
            flex-direction: column;
            gap: 4px;
            background-color: var(--c-block);
            /* border-bottom-left-radius: 12px; */
            /* border-bottom-right-radius: 12px; */
        }

        div.models { 
            display: flex;
            flex-direction: row;
            gap: 4px;
            padding: 2px 8px;
            overflow-x: auto;
        }

        span.badge {
            padding: 8px 16px;
            border-radius: 8px;
            opacity: 0.5;
            font-size: small;
        }

        a.btn {
            padding: 8px 16px;
            border-radius: 8px;
            font-size: small;
        }

        span.active {
            opacity: 1;
        }

        #message-input {
            flex: 1;
            padding: 16px;
            border: 0.1px solid var(--c-font);
            border-radius: 12px;
            font-size: small;
            outline: none;
            background-color: var(--c-background);
            color: var(--c-font);
            min-height: 48px;
            max-height: 50vh;
            height: 48px;
        }

        #send-button {
            padding: 12px 24px;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.2s;
            max-height: 48px;
        }

        #send-button:hover {
            opacity: 0.5;
        }

        /* 加载动画 */
        .loading {
            display: inline-block;
            padding: 12px 16px;
            background: var(--c-block);
            border-radius: 18px;
            color: var(--c-font);
        }

        .dot-flashing {
            position: relative;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #8E8E93;
            animation: dotFlashing 1s infinite linear;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes dotFlashing {
            0% { background-color: #8E8E93; }
            50%, 100% { background-color: rgba(142,142,147,0.2); }
        }

        /* 保留原有样式基础上新增以下内容 */
        .message pre {
            padding: 12px;
            border-radius: 6px;
            overflow-x: auto;
            box-shadow: 0 2px 12px rgba(0,0,0,0.2);
            background-color: var(--c-background);
            color: var(--c-font);
        }

        .message code {
            font-family: 'Menlo', monospace;
            font-size: 14px;
        }

        .message table {
            border-collapse: collapse;
            margin: 12px 0;
        }

        .message td, .message th {
            border: 1px solid #ddd;
            padding: 8px;
        }

        ul.decimal {
            list-style-type: decimal;
        }

        li.i1 {
            margin-left: 8px;
        }
        li.i2 {
            margin-left: 16px;
        }
        li.i1 {
            margin-left: 24px;
        }

        #history-button {
            padding: 12px 12px;
            border: none;
            border-radius: 16px;
            cursor: pointer;
            transition: background 0.2s;
            max-height: 48px;
        }

        #session-list{
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 999;
            display: none;
        }
        #session-list-nav {
            position: absolute;
            left: 0;
            top: 0;
            width: 70%;
            height: 100%;
            border-right: solid 0.5px;
            overflow-y: scroll;
        }
        #session-list-mask{
            position: absolute;
            right: 0;
            width: 30%;
            height: 100%;
            top: 0;
            background-color: #3333;
        }
        .session-li {
            padding: 12px;
            border-bottom: solid 0.5px;
        }

        .li-model-span {
            color: var(--c-gray);
            text-decoration: underline;
        }
        .li-model-tip {
            font-size: 8px;
            opacity: 0.8;
            margin-bottom: 4px;
        }
        .li-content {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
        }
    </style>
</head>
<body id="main-body" class="b_secondary">
    
    <div id="main-div" class="chat-container b_background">
        <div class="chat-messages" id="chat-messages">
            <template v-for="msg in messages">
                <div :class="`thinking message ${msg.isUser ? 'user-message b_primary' : 'bot-message b_block'}`" v-if="!!msg.thinking.trim()" v-on:click="msg.tfolded=!msg.tfolded;">{{ msg.tfolded ? (msg.thinking.substr(0, 6) + "...") : msg.thinking }}</div>
                <template v-if="msg.isUser">
                    <div class="message user-message b_primary" :class="msg.cfolded ? 'message-hidden' : ''" v-html="msg.content" v-on:click="msg.cfolded=false"></div>
                </template>
                <template v-else>
                    <div class="message bot-message b_block">
                        <div v-if="msg.rawPresent" style="white-space: pre-wrap;">{{ msg.raw.trim() }}</div>
                        <div v-else v-html="msg.content"></div>    
                        <div class="message-raw-btn" v-on:click="msg.rawPresent=!msg.rawPresent;" v-if="msg.raw.length > 100">
                            <span>{{ msg.rawPresent ? "MD" : "RAW" }}</span>
                        </div>
                        <div class="message-btn b_primary" v-on:click="cp2clipboard(msg.raw);" v-if="msg.raw.length > 100"><span>COPY</span></div>
                    </div>
                </template>
                
            </template>
            
            <div class="message loading bot-message" v-if="loading">
                <div class="temp" v-if="!!previewText">{{ previewText }}</div>
                <div class="dot-flashing"></div>
            </div>
        </div>
        
        <div class="input-container">
            <div class="models">
                <a class="btn b_primary" href="popup.html" target="_blank">新窗口</a>
                <template v-for="m in models">
                    <span class="badge b_primary" v-on:click="selectModel(m)" :class="model==m ? 'active' : ''">
                        {{ m }}
                    </span>
                </template>
                
            </div>
            <div style="display:flex;flex-direction:row;gap: 4px;width: 100%">
                <button id="history-button" class="b_primary">历史</button>
                <textarea v-model="sendText"  type="text" 
                    id="message-input" 
                    placeholder="输入消息..."
                    autocomplete="off"
                    autofocus></textarea>
                <button id="send-button" class="b_primary">发送</button>
            </div>
        </div>
    </div>

    <div id="session-list">
        <div id="session-list-nav" class="b_background">
            
        </div>
        <div style="position: absolute;right: 30%;bottom: 0;margin: 16px;"><a id="new-session-a" class="btn b_primary">新会话</a></div>
        <div id="session-list-mask"></div>
    </div>
    <script src="popup.js"></script>

</body>
</html>
